<template>
  <div class="x-slider" :style="{ top: top, right: right }">
    <div class="slider-all">
      <!-- <x-slider-item
        @handleClick="handleOpen"
        :isActive="isOpen"
        :url="allIcon.url"
        :checkedUrl="allIcon.checkedUrl"
      />-->
      <div class="silder-item" :class="{ 'item-h': isOpen }">
        <x-slider-item
          @handleClick="handleItem(index)"
          v-for="(item, index) in slider"
          :key="index"
          :isBottom="index != slider.length - 1"
          :isActive="currentItem == item.id"
          :url="item.url"
          :name="item.name"
          :checkedUrl="item.checkedUrl"
        />
      </div>
    </div>
    <!-- <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      class="jk-dialog"
      style="margin-top:5vh"
    >
      <div id="h5videobox">
        <video
          style="height:800px"
          class="h5video"
          id="h5sVideo1"
          autoplay
          webkit-playsinline
          playsinline
        ></video>
      </div>
    </el-dialog>-->
  </div>
</template>
<script>
import XSliderItem from "@/components/xslideritem";
import { mapActions } from "vuex";

export default {
  name: "xsilder",
  data() {
    return {
      isOpen: true,
      currentItem: 1,
      // allIcon: {
      //   url: require("@/assets/images/slidericon/menu.png"),
      //   checkedUrl: require("@/assets/images/slidericon/menuSelect.png")
      // },
      slider:[],
      sliders: [
        // {
        //   url: require("@/assets/images/slidericon/jk.png"),
        //   checkedUrl: require("@/assets/images/slidericon/jkSelect.png")
        // },
        {
          url: require("@/assets/images/slidericon/elfence.png"),
          checkedUrl: require("@/assets/images/slidericon/elfenceSelect.png"),
          name: "电子围栏",
          id:0
        },
        {
          url: require("@/assets/images/slidericon/fence.png"),
          checkedUrl: require("@/assets/images/slidericon/fenceSelect.png"),
          name: "周界围栏",
          id:1,
        },
        {
          url: require("@/assets/images/slidericon/ai.png"),
          checkedUrl: require("@/assets/images/slidericon/aiSelect.png"),
          name: "物联设备",
          id:2
        },
        {
          url: require("@/assets/images/slidericon/evalert.png"),
          checkedUrl: require("@/assets/images/slidericon/evalertSelect.png"),
          name: "预警事件",
          id:3
        }
        // {
        //   url: require("@/assets/images/slidericon/xf.png"),
        //   checkedUrl: require("@/assets/images/slidericon/xfSelect.png")
        // }
      ]
    };
  },
  props: {
    top: {
      type: String,
      default: "55%"
    },
    right: {
      type: String,
      default: "580px"
    },
     list:{
      type:Array,
      default:[]
    }
  },
  watch:{
    'list':function(){
     this.$nextTick(() => {
       this.getData()
    })
    }
  },
  components: {
    XSliderItem
  },
  mounted() {
    this.getData()
  },
  methods: {
    ...mapActions(["GetBottomSliderItemAction"]),
    //打开菜单
    handleOpen() {
      this.isOpen = !this.isOpen;
    },
    getData(){
       this.currentItem=this.list[0].id;
      this["GetBottomSliderItemAction"](this.currentItem);
      var sliders=this.sliders
         this.slider=[]
    for(var i in this.list){
      sliders.map(item=>{
        if(item.id==this.list[i].id){
          this.slider.push(item)
        }
      })
    }
    },
    //点击菜单
    handleItem(index) {
      this.currentItem = index;
      this["GetBottomSliderItemAction"](index);
    }
  }
};
</script>

<style lang="less" scoped>
.x-slider {
  position: absolute;
  top: 55%;
  z-index: 1;
  .silder-item {
    transition: height 0.3s ease-in-out;
    height: 0;
    overflow: hidden;
    &.item-h {
      height: 19.2rem;
    }
  }
}
</style>
